<template>
  <div>
    <!---
          有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.
          -->
    <template v-if="openType && openType === 'drawer'">
      <el-drawer v-model="isShow" v-bind="usersProps">
        <div :style="{ height: height + 'px' }" class="dialog-box">
          <!---表格查询-->
          <com-crud-operation
            ref="refOperation"
            v-bind="operationConfig"
            @submit-form="submitForm"
          ></com-crud-operation>
        </div>
      </el-drawer>
    </template>
    <!--Dialog 弹出一个对话框，适合需要定制性更大的场景-->
    <template v-else>
      <el-dialog v-model="isShow" v-bind="usersProps">
        <template #header>
          {{ title }}
        </template>
        <!---内容-->
        <div :style="{ height: height + 'px' }" class="dialog-box">
          <!---表格查询-->
          <com-crud-operation
            ref="refOperation"
            v-bind="operationConfig"
            @submit-form="submitForm"
          ></com-crud-operation>
        </div>
        <template #footer>
          <div class="dialog-footer" v-if="currentModes !== 'look'">
            <el-button
              v-for="(items, index) in footerButton"
              :key="index"
              v-bind="items"
              @click="onFooterButton(items)"
              >{{ items.name }}</el-button
            >
          </div>
        </template>
      </el-dialog>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, type PropType } from 'vue'
interface operationColumn {
  name: string
  value: string
  type: string
}

const usersProps = defineProps({
  appendToBody: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '系统提示'
  },
  height: {
    type: Number,
    default: 500
  },
  openType: {
    type: String,
    default: 'dialog'
  },
  footerButton: {
    type: Array as PropType<operationColumn[]>,
    default: () => {
      return [
        {
          name: '关闭',
          value: 'close'
        },
        {
          name: '重置',
          value: 'reset'
        },
        {
          type: 'primary',
          name: '确定',
          value: 'confirm'
        }
      ]
    }
  },
  operationConfig: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const { openType, footerButton, title, height, operationConfig } = toRefs(usersProps)

const isShow = ref(false)
const currentModes = ref('look')
const refOperation = ref()

const emits = defineEmits(['submitForm'])

/**
 * 显示弹框---
 * @param mode  add、update、look
 */
const show = (mode: string) => {
  isShow.value = true
  currentModes.value = mode
}
const hide = () => {
  isShow.value = false
}

//返回的数据
const submitForm = (data: object) => {
  emits('submitForm', data, currentModes.value)
  hide()
}

/**
 * 点击增加按钮处理
 * 确认、重置、关闭
 * @param items
 */
const onFooterButton = (items: operationColumn): void => {
  if (items.value === 'confirm') return refOperation.value.submitForm()
  if (items.value === 'reset') return refOperation.value.resetForm()
  if (items.value === 'close') return hide()
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
.dialog-box {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  overflow-y: auto;
  width: 100%;
}
</style>
